<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>选项卡</title>
     <style>
        *{padding: 0px;margin: 0px;list-style: none;}
    
        .top-nav {
            width: 400px;
            height: 40px;
            display: flex;
        }
        .top-nav .top-item {
            flex: 1;
            width: 100%;
            text-align: center;
            line-height: 40px;
            background-color: aliceblue;
        }
        .bottom-query {
            position: relative;
            width: 400px;
            height: 130px;
            /* background-color: aqua; */
        }
        .top-nav .active-top-item {
            background-color: rgb(166, 91, 247);
        }
        .bottom-query .bottom-item {
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: aliceblue;
        }
        .bottom-query .active-bottom-item {
            display: block;
            background-color: rgb(166, 91, 247);
        }

    </style>
     <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
    <ul class="top-nav">
        <li class="active-top-item top-item">看书</li>
        <li class="top-item">看电影</li>
        <li class="top-item">娱乐</li>
    </ul>
    <ul class="bottom-query">
        <li class="active-bottom-item bottom-item">西游记</li>
        <li class="bottom-item">还冒泡泡</li>
        <li class="bottom-item">囍</li>
    </ul>
     <pre>
        <code style='max-height: 400px'>
        let topItemList = document.querySelectorAll('.top-item')
        let bottomItemList = document.querySelectorAll('.bottom-item')
        for(let i=0; i < topItemList.length; i++) {
            topItemList[i].addEventListener('click',() => update(i))
        }
        function update(i){
            for(let j = 0;j < topItemList.length; j++) {
                topItemList[j].classList.remove('active-top-item')   
                bottomItemList[j].classList.remove('active-bottom-item')
            }
            topItemList[i].classList.add('active-top-item')
            bottomItemList[i].classList.add('active-bottom-item')
        }
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        let topItemList = document.querySelectorAll('.top-item')
        let bottomItemList = document.querySelectorAll('.bottom-item')
        for(let i=0; i < topItemList.length; i++) {
            topItemList[i].addEventListener('click',() => update(i))
        }
        function update(i){
            for(let j = 0;j<topItemList.length; j++) {
                topItemList[j].classList.remove('active-top-item')   
                bottomItemList[j].classList.remove('active-bottom-item')
            }
            topItemList[i].classList.add('active-top-item')
            bottomItemList[i].classList.add('active-bottom-item')
        }
     </script>
</body>
</html>